<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>后台管理-学业预警工作助手</title>
    <link rel="stylesheet" href="static/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="/app/static/css/idx_index.css">
</head>
<body>
<div id="indexApp">
    <div class="conItem">
        <div class="conLeft">
            <div class="conTop">管理系统</div>
            <el-menu :default-active="activeIndex" class="el-menu-vertical-demo" @select="handleSelect"
                     background-color="#545c64" text-color="#fff" active-text-color="#ffd04b"
                     style="height: 100%;">
                <el-menu-item index="9999" @click="toRouter('wel_index')">
                    <i class="el-icon-s-home"></i>
                    <span slot="title">主页</span>
                </el-menu-item>
                <el-menu-item :index="item.id.toString()" v-for="(item,index) in menuList"
                              @click="toRouter('/app/'+item.href)">
                    <i class="el-icon-menu"></i>
                    <span slot="title">{{item.name}}</span>

                </el-menu-item>
            </el-menu>
        </div>
        <div class="conRight">
            <div class="conTopRight">
                <div style="flex-grow: 1;"></div>
                <div class="loginout">欢迎您：{{userObj.NAME}}</div>
                <i class="el-icon-switch-button" @click="loginOut();"></i>
            </div>
            <div v-if="activeIndex==9999" class="conIframe">
                <h1>欢迎您使用学业预警工作助手管理系统</h1>
                <el-row :gutter="20"  type="flex">
                    <el-col :span="12">
                        学年
                        <el-select v-model="ruleForm.session_manage_id" placeholder="请选择学年">
                            <el-option
                                    v-for="item in classOptionssession_manage_id"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                            </el-option>
                        </el-select>


                        <el-button size="mini" type="warning" style="background-color:#fd8c12;" @click="search()">搜索
                        </el-button>

                        <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
                        <div id="main1" style="width: 600px;height:400px;margin-top: 80px;"></div>

                    </el-col>
                    <el-col :span="12">

                        <div id="main2" style="width: 600px;height:400px;margin-top: 100px;"></div>

                    </el-col>
                </el-row>









            </div>
            <iframe v-else :src="acticeIframeUrl" :id="acticeIframeUrl" frameborder="0" width="98%" min-width="100%"
                    scrolling="auto" class="conIframe"></iframe>
            <div class="conRightBottom">版权所有 ZYY</div>
        </div>
    </div>
</div>
</body>
<!-- 全局js -->
<script src="static/echarts.min.js"></script>
<script src="static/js/vue.js"></script>
<script src="static/element-ui/lib/index.js"></script>
<script src="static/js/jquery-2.2.3.min.js"></script>
<script>

    var basePath = "/" + window.location.pathname.split("/")[1];
    var indexApp = new Vue({
        el: "#indexApp",
        data() {
            return {
                activeIndex: "9999",
                acticeIframeUrl: "",
                userObj: {},
                isFullScreenFlag: false,
                noticeList: [],
                menuList: [],
                classOptionssession_manage_id:[],
                ruleForm:{
                    session_manage_id:''
                },
            }
        },
        created() {
            this.userObj = JSON.parse(localStorage.getItem("userInfo"));
            this.getRoleQx(this.userObj.jurisdiction_manage_id);
        },
        mounted() {
            this.getClassOptionssession_manage_id()
            this.search()

        },
        methods: {
            queryViolationPie(){
                console.log('去搜索')
                let that = this;
                $.ajax({
                    type: "GET",
                    url: `${basePath}/violation_type/queryViolationPie`,
                    data: {},
                    success: function (data) {
                        var resdata = data.data
                        console.log(typeof  resdata)
                        // 基于准备好的dom，初始化echarts实例
                        var myChart = echarts.init(document.getElementById('main2'));


                        var option = {
                            title: {
                                text: '违规人数占比',
                                subtext: '',
                                left: 'center'
                            },
                            tooltip: {
                                trigger: 'item'
                            },
                            legend: {
                                orient: 'vertical',
                                left: 'left'
                            },
                            color: ['#fc8251', '#ef6567'],
                            series: [
                                {
                                    name: '违规人数占比',
                                    type: 'pie',
                                    radius : '55%',
                                    center: ['50%', '60%'],
                                    label: {
                                        normal: {
                                            show: true,
                                            formatter: '{b}: {c}({d}%)' //自定义显示格式(b:name, c:value, d:百分比)
                                        }
                                    },
                                    data: resdata                //datas在其他地方已赋值
                                }
                            ]
                        };

                        // 使用刚指定的配置项和数据显示图表。
                        myChart.setOption(option);
                    }
                })


            },
            search(){
                console.log('去搜索')
                let that = this;
                $.ajax({
                    type: "GET",
                    url: `${basePath}/result_manage/queryResultManageBySessionManageId`,
                    data: {session_manage_id:that.ruleForm.session_manage_id},
                    success: function (data) {
                        var resdata = data.data
                        console.log(typeof  resdata)
                        // 基于准备好的dom，初始化echarts实例
                        var myChart = echarts.init(document.getElementById('main1'));


                        var option = {
                            title: {
                                text: '学业预警人数占比',
                                subtext: '',
                                left: 'center'
                            },
                            tooltip: {
                                trigger: 'item'
                            },
                            legend: {
                                orient: 'vertical',
                                left: 'left'
                            },
                            color: ['#91cd77', '#5470c6','#fc8251', '#ef6567'],
                            series: [
                                {
                                    name: '学业预警人数占比',
                                    type: 'pie',
                                    radius : '55%',
                                    center: ['50%', '60%'],
                                    label: {
                                        normal: {
                                            show: true,
                                            formatter: '{b}: {c}({d}%)' //自定义显示格式(b:name, c:value, d:百分比)
                                        }
                                    },
                                    data: resdata                //datas在其他地方已赋值
                                }
                            ]
                        };

                        // 使用刚指定的配置项和数据显示图表。
                        myChart.setOption(option);
                    }
                })

                this.queryViolationPie()
            },
            getClassOptionssession_manage_id() {
                let that = this;
                $.ajax({
                    type: "GET",
                    url: `${basePath}/session_manage/querySessionManageKey`,
                    data: {},
                    success: function (data) {
                        that.classOptionssession_manage_id = data.data;
                    }
                })
            },
            getRoleQx(id) {
                let that = this;
                $.ajax({
                    type: "GET",
                    url: `${basePath}/jurisdiction_manage/queryJurisdictionManageKey`,
                    data: {id},
                    success: function (res) {
                        let menuLts = res.data[0].app_menu_tree.split(',');
                        console.log(menuLts);
                        for (var item of menuLts) {
                            that.getMenuList(item)
                        }
                    }
                })
            },
            getMenuList(id) {
                let that = this;
                $.ajax({
                    type: "GET",
                    url: `${basePath}/app_menu/queryAppMenuKey`,
                    data: {id},
                    success: function (data) {
                        that.menuList.push(data.data[0]);
                    }
                })
            },
            handleSelect(key, keyPath) {
                console.log(key);
                this.activeIndex = key;
            },
            loginOut() {
                var that = this;
                $.ajax({
                    type: "GET",
                    url: `${basePath}/logout`,
                    data: {},
                    success: function (data) {
                        window.location.href = basePath + "/idx_login";
                        localStorage.removeItem("userInfo")
                    }
                })
            },
            fullScreen() {
                this.isFullScreenFlag = true;
                var docElm = document.documentElement;
                //W3C
                if (docElm.requestFullscreen) {
                    docElm.requestFullscreen();
                }
                //FireFox
                else if (docElm.mozRequestFullScreen) {
                    docElm.mozRequestFullScreen();
                }
                //Chrome等
                else if (docElm.webkitRequestFullScreen) {
                    docElm.webkitRequestFullScreen();
                }
                //IE11
                else if (elem.msRequestFullscreen) {
                    elem.msRequestFullscreen();
                }
            },
            miniScreen() {
                this.isFullScreenFlag = false;
                var el = document;
                var cfs = el.cancelFullScreen || el.webkitCancelFullScreen || el.mozCancelFullScreen || el.exitFullScreen;
                if (typeof cfs != "undefined" && cfs) {
                    cfs.call(el);
                } else if (typeof window.ActiveXObject != "undefined") {
                    //for IE，这里和fullScreen相同，模拟按下F11键退出全屏
                    var wscript = new ActiveXObject("WScript.Shell");
                    if (wscript != null) {
                        wscript.SendKeys("{F11}");
                    }
                }
            },
            toRouter(src, name) {
                this.curSet = name;
                if (src == 'wel_index') {
                } else {
                    this.acticeIframeUrl = src;
                }
            }
        }
    })
</script>
</html>
